<script setup lang="ts">

import ShoppingBox from "~/components/shop/shoppingBox.vue";

const props = defineProps({
  scrollShow: {
    type: Number,
    default: 15,
  },
  scrollFixed: {
    type: Number,
    default: 10,
  },
  offset: {
    type: Array,
    default: [30, 5],
  },
  remToPx: {//1rem = 16px
    type: Number,
    default: 16,
  },
});
const rollingShow = ref(false)

onMounted(()=>{
  addWindowListen();
})

function addWindowListen(){
  window.addEventListener('scroll', () => {
    // 当页面滚动时显示按钮
    let suspensionBox = document.getElementById('suspension-box');
    window.onscroll = function () {
      let scrollShow = props.scrollShow * props.remToPx;
      if (document.body.scrollTop > scrollShow || document.documentElement.scrollTop > scrollShow) {
        rollingShow.value = true;
      } else {
        rollingShow.value = false;
      }
      let position = ((props.offset[0] - props.scrollFixed) * props.remToPx)
      if (window.scrollY >= position) {
        // 设置盒子位置以防止跳动
        suspensionBox.style.position = `fixed`;
        suspensionBox.style.top = props.scrollFixed + `rem`;
      } else {
        suspensionBox.style.position = `absolute`;
        suspensionBox.style.top = props.offset[0] + `rem`;
        // 逐渐回到原始位置
      }
    };
  });
}

// 点击按钮时滚动到顶部
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 平滑滚动
  });
}




//购物车相关
const shoppingShow = ref(false);
function shoppingShowClick() {
  shoppingShow.value = true
}
</script>

<template>
  <div class="suspension-box" id="suspension-box" :style="'top: '+props.offset[0]+'rem;right: '+props.offset[1]+'rem'">
    <div class="fixed-box">
      <div class="suspension-item" v-if="constantStore().shoppingIconShow" @click="shoppingShowClick">
        <el-badge v-if="userInfoStore().shoppingList&&userInfoStore().shoppingList.length>0" :value="userInfoStore().shoppingList.length" :max="999" :offset="[0, 5]">
          <i class="iconfont icon-gouwuchekong"></i>
        </el-badge>
        <span v-else>
          <i class="iconfont icon-gouwuchekong"></i>
        </span>
      </div>
    </div>
    <div class="rolling-appears-box" v-show="rollingShow">
      <div class="suspension-item" @click="scrollToTop">
        <i class="iconfont icon-fanhuidingbu"></i>
      </div>
    </div>
    <div class="other-dialog-box">
      <shoppingBox v-model="shoppingShow" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.suspension-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  user-select: none;
  position: absolute;
  z-index: 1000; /* 确保在其他元素之上 */

  :deep(.suspension-item) {
    cursor: pointer;
    padding: .5rem;
  }

  :deep(.iconfont) {
    font-size: 2rem;
  }

  .fixed-box {
    display: inherit;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
  }

  .rolling-appears-box {
    display: inherit;
    flex-direction: inherit;
    align-items: inherit;
    justify-content: inherit;
    transition: all .7s ease; /* 所有属性在1秒内平滑过渡 */
  }
}
</style>